<template>
  <div class="loading"  v-if="flag">
      <div>
          <img src="http://h5.chelun.com/2017/official/img/loading.gif" alt="">
          <p>加载中~</p>
      </div>
      
  </div>
</template>

<script>
export default {
  name: 'Loading',
    data() {
        return {
            flag: false
        }
    },
    methods: {
        showFlag() {
            this.flag = true
        },
        hideFlag() {
            this.flag = false
        }
    }
}
</script>

<style lang="scss">
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  &>div{
    position: relative;
    top: 50%;
    left: 113px;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    width: 110px;
    height: 110px;
    background: #000;
    border-radius: 10px;
    text-align: center;
  }
  img{
    width: 50px;
    margin-top: 17px;
  }
  p{
    font-size: 15px;
    color: silver;
    margin-top: 15px;
  }
}
</style>